<template>
    <div class="facility">
        <template v-for="(itemIndex, index) in facilitySort" :key="index">
            <div class="item1">
                <!-- 左侧title -->
                <div class="left">
                    <img :src="houseFacilitys[itemIndex].icon" alt="">
                    <div class="groupName">{{ houseFacilitys[itemIndex].groupName }}</div>
                </div>
                <div class="nameList">
                    <!-- 右侧最多四个name -->
                    <template v-for="(item, indexx) in houseFacilitys[itemIndex].facilitys.slice(0, 4)" :key="indexx">
                        <div class="item2">
                            <van-icon name="passed" color="#17d2bc" />{{ item.name }}
                        </div>
                    </template>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
const props = defineProps({
    houseFacility: {
        type: Object,
        default: () => ({})
    }
})

const facilitySort = props.houseFacility.facilitySort
const houseFacilitys = props.houseFacility.houseFacilitys


</script>

<style lang="less" scoped>
.facility {
    background-color: #f7f9fb;
    color: #333;
    padding: 5px 16px 20px;
    border-radius: 6px;

    .item1 {
        display: flex;
        align-items: center;
        margin-top: 20px;

        .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;

            .groupName {
                font-weight: 600;
                font-size: 11px;
                margin-top: 3px;
            }


            img {
                width: 20px;
                height: 20px;
            }
        }

        .nameList {
            display: grid;
            grid-template-columns: auto auto ;
            grid-template-rows: auto auto;
            margin-left: 17px;

            .item2 {
                width: 110px;
                height: 14px;

                margin-top: 7px;
            }
        }
    }
}
</style>